<!DOCTYPE html>
<html>

<head>
    <title>Bootstrap-Confirmation Demo</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width">
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet">
</head>

<body>
<div class="container">
    <div class="row">
        <div class="col-md-12">
            <h1>Default options with datta toggle</h1>
            <pre>$('[data-toggle="confirmation"]').confirmation();</pre>
            <a href="#" class="btn btn-default" data-toggle="confirmation">Click me</a>
        </div>
    </div>
    <div class="row">
        <div class="col-md-12">
            <h1>With callback functions</h1>
            <pre>$('.confirmation-callback').confirmation({
	onConfirm: function(event) { alert('confirm') },
	onCancel: function(event) { alert('cancel') }
});</pre>
            <a href="#" class="btn btn-default confirmation-callback">Click me</a>
        </div>
    </div>
</div>
<script src="https://code.jquery.com/jquery-1.11.2.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.js"></script>
<script src="bootstrap-confirmation.js"></script>
<script>
    $(function () {
        $('body').confirmation(
            {
                selector: '[data-toggle="confirmation"]'
            });
        $('.confirmation-callback').confirmation(
            {
                onConfirm: function () {
                    alert('confirm')
                },
                onCancel: function () {
                    alert('cancel')
                }
            });
    });
</script>
</body>

</html>